<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.js"></script>
    <script type="text/javascript" src="fonts/iconfont.js" ></script>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
    <script type="text/javascript" src="js/plug/swiper-3.4.0.jquery.min.js" ></script>
    <script src="js/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/template-web.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="css/index.css" />
    <link href="css/mui.css" rel="stylesheet"/>
    <link rel="stylesheet" href="css/plug/mescroll-option.css" />
    <link rel="stylesheet" href="css/plug/mescroll.min.css" />
    <link rel="stylesheet" href="css/plug/swiper-3.2.7.min.css" />
    <link rel="stylesheet" type="text/css" href="css/ztree/zTreeStyle/zTreeStyle.css"/>
    <style type="text/css">
    	.swiper-container-autoheight{min-height: 200px;}
        .ul-ohter *{box-sizing: border-box;}
        span.smallTitle {display: block;width: 98%; padding-left: 2%;    font-size: .8rem;    padding-top: 0.5rem;    padding-bottom: .5rem;    color: #666;}
       .mui-content p.selectBox select {   display: block;    outline: none;    background-color: #f9f9f9;    -webkit-appearance: none;    height: 2.2rem;width: 100%;}
        .mui-content p.selectBox {    display: block;    width: 97%;    height: auto;    background: #f9f9f9;    padding: 1.5%;}
        .mui-input-group label.inputcontent{ padding-right: 15px;padding-left: 38px !important;line-height: 40px;padding:0}
        .mui-input-group .inputcontent .img{float: left;height: 35px; width: 35px;top: 2px;position: relative;}
        .mui-input-group .inputcontent .intro{float: right;color: #666; font-size: 12px;line-height: 40px;width: calc(100% - 50px);overflow: hidden;padding-right: 5px;}
        .mui-input-group .inputcontent .img img{height: 35px; width: 35px;border-radius: 50%;content:'';font-size: 0;position: relative;top: -5px;}
        #popover{font-size: 12px;}
        #popover input{width: auto;height: 1em;margin-bottom: 1px;}
        #serachpsyer{box-sizing: border-box;margin: 0;}
        .showletter{height: 200px;margin-top: 20px;overflow-y: scroll;font-size: 12px;}
        .saveletter{display: block;width: 100%;line-height: 2em;text-align: center;font-size: 20px;color: #fff;background: #007aff;margin-bottom: 0;}
        .ztree * {font-size: 10pt;font-family:"Microsoft Yahei",Verdana,Simsun,"Segoe UI Web Light","Segoe UI Light","Segoe UI Web Regular","Segoe UI","Segoe UI Symbol","Helvetica Neue",Arial}
        .ztree li ul{ margin:0; padding:0}
        .ztree li {line-height:30px;}
        .ztree li a {width:200px;height:30px;padding-top: 0px;}
        .ztree li a:hover {text-decoration:none; background-color: #E7E7E7;}
        .ztree li a span.button.switch {visibility:hidden}
        .ztree.showIcon li a span.button.switch {visibility:visible}
        .ztree li a.curSelectedNode {background-color:#D4D4D4;border:0;height:30px;}
        .ztree li span {line-height:30px;}
        .ztree li span.button {margin-top: -7px;}
        .ztree li span.button.switch {width: 16px;height: 16px;}
        .zTreeDemoBackground{background: #f9f9f9;}
        .ztree li a.level0 span {font-size: 150%;font-weight: bold;}
        .ztree li span.button {background-image:url("./left_menuForOutLook.png"); *background-image:url("./left_menuForOutLook.gif")}
        .ztree li span.button.switch.level0 {width: 20px; height:20px}
        .ztree li span.button.switch.level1 {width: 20px; height:20px}
        .ztree li span.button.noline_open {background-position: 0 0;}
        .ztree li span.button.noline_close {background-position: -18px 0;}
        .ztree li span.button.noline_open.level0 {background-position: 0 -18px;}
        .ztree li span.button.noline_close.level0 {background-position: -18px -18px;}
    </style>
    <script type="text/javascript" charset="utf-8">
        mui.init();
        document.addEventListener('plusready',function(){
            plus.navigator.setStatusBarBackground("#006EC3");
            plus.navigator.setStatusBarStyle("light");
;       },false);
    </script>
</head>
<body>
    <nav class="mui-bar mui-bar-tab">
            <a class="mui-tab-item mui-active" href="#tabbar" i="1" id="tab1">
                <svg class="icon zoomIn" aria-hidden="true">
                    <use xlink:href="#icon-ITshenqing"></use>
                </svg>
                <span class="mui-tab-label">首页</span>
            </a>
            <a class="mui-tab-item" href="#tabbar-with-sfjz" i="2" id="tab2">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-lizhijiaojie"></use>
                </svg>
                <span class="mui-tab-label">司法救助</span>
            </a>
            <a class="mui-tab-item" href="#tabbar-with-jb" id="tab3" >
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-diannaoguzhang"></use>
                </svg>
                <span class="mui-tab-label">控告</span>
            </a>
            <a class="mui-tab-item" href="#tabbar-with-my" id="tab4">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-nan"></use>
                </svg>
                <span class="mui-tab-label">我</span>
            </a>
        </nav>
        <div class="mui-content">
            <div id="tabbar" class="mui-control-content mui-active">
                <!--主页下拉可以刷新--> 
                <!--滑动区域-->
                <div id="mescroll1" class="mescroll">
                    <!--轮播图-->
                    <div class="banner">
                        <div id="demo01" class="flexslider">
                            <ul class="slides">
                                <li><div class="img"><img src="img/banner.jpg" alt="" /></div></li>
                                <li><div class="img"><img src="img/banner1.jpg" alt="" /></div></li>
                            </ul>
                        </div>
                    </div>
                    <div class="menus">
                        <a href="#" class="menuOne left">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-xinliyanjiu"></use>
                            </svg>
                            <label for="">心理咨询师</label>
                        </a>
                        <a href="#" class="menuOne right">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-falv1"></use>
                            </svg>
                            <label for="">法律咨询</label>
                        </a>
                    </div>
                    <!--新闻分类切换-->
                    <div class="container">
                        <div class="swiper-container swiper1">
                            <div class="swiper-wrapper" id="cloumn-list">
                                <!--模版渲染（tpl-columnList）-->
                            </div>
                        </div>
                        <!-- swiper2 -->
                        <div class="swiper-container swiper2">
                            <div class="swiper-wrapper" id="news-list">
                               <!-- <div class="swiper-slide swiper-no-swiping">
                                    <!--展示上拉加载的数据列表-->
                                    <!--<ul id="dataList1" class="data-list">-->
                                        <!--动态渲染
                                    </ul>
                                </div>
                                <div class="swiper-slide swiper-no-swiping">
                                    <p class="noContent">
                                        <svg class="icon" aria-hidden="true">
                                            <use xlink:href="#icon-jingcha"></use>
                                        </svg>  
                                        <label for="">暂无内容</label>
                                    </p>
                                </div>-->
                            </div>
                        </div>
                    </div>
                    
                </div>  
                <!--底部-->
            </div>
            <div id="tabbar-with-sfjz" class="mui-control-content">
                <header id="header" class="mui-bar mui-bar-nav">
                    <a class="mui-pull-right" style="">
                        <svg class="icon yiwen" aria-hidden="true">
                            <use xlink:href="#icon-yiwen"></use>
                        </svg>  
                    </a>
                    <h1 class="mui-title">司法救助</h1>
                </header>
                <div class="sfjzList mescroll" id="mescroll2">
                    <ul id="sfjzList" class="data-list">
                        <!--动态渲染-->
                    </ul>
                </div>              
            </div>
            <!--举报栏目-->
            <div id="tabbar-with-jb" class="mui-control-content">
                <header id="header" class="mui-bar mui-bar-nav">
                    <a class="mui-pull-right" style="">
                        <svg class="icon jbxy" aria-hidden="true">
                            <use xlink:href="#icon-jinggao"></use>
                        </svg>  
                    </a>
                    <h1 class="mui-title">控告</h1>
                </header>
                <div class="jbMain">
                    <span class="smallTitle">控告类型</span>
                    <p class="selectBox">
                        <select class="jbType" id="type">
                           
                        </select>
                    </p>
                    <div class="name-phone">
                        <span class="smallTitle xm">姓名</span>
                        <p class="selectBox xm">
                            <input type="text" class="zxInput" id="user">
                        </p>
                        <span class="smallTitle hm">电话号码</span>
                        <p class="selectBox hm">
                            <input type="tel" class="zxInput" id="phone">
                        </p>
                        
                    </div>
                     <div class="area-div">
                        <span class="smallTitle">下属部门</span>
                        <div class="zTreeDemoBackground left" style="height: 20vh;overflow-y: scroll;">
                            <ul id="treeDemo" class="ztree"></ul>
                        </div>
                        <input type="hidden" name="selceted-areaid" id="selceted-areaid" value="" />
                    </div>
                    <span class="smallTitle">控告内容</span>
                    <p class="inputBox">
                        <textarea id="description_info"></textarea>
                    </p>
                    <span class="smallTitle">图片（选填，提供证据图片）</span>
                    <p class="imgBox clearfix">
                        <a class="addImg" id="zxjbImage">+</a>
                    </p>
                    <p class="mui-input-row mui-checkbox mui-left">                     
                        <input name="checkbox" value="1" type="checkbox" id="isnouser">
                        <label class="jbxy" for="checkbox">匿名控告</label>
                    </p>
                    <a href="javascript:void(0)" class="submitJb">提交控告</a>
                </div>
            </div>
            <!--我的-->
            <div id="tabbar-with-my" class="mui-control-content">
                <!--头像等相关信息-->
                <div class="headerName">
                    <div class="hnMain">
                        <p class="hnPic">
                            <img src="img/t.jpg">
                        </p>
                        <p class="hnNamePhone">
                            <span class="hnpName">小小检察官</span>
                            <span class="hnpPhone">139****9409</span>
                        </p>
                        <p class="hRight">
                            <svg class="icon my" aria-hidden="true">
                                <use xlink:href="#icon-jiantou"></use>
                            </svg>
                        </p>
                    </div>              
                </div>
                <!--如果他又权限的话，请显示办案系统-->
                <p class="banan">
                    <label class="baaaa">
                        <svg class="baa" aria-hidden="true">
                            <use xlink:href="#icon-gongpai"></use>
                        </svg> 
                    </label>
                    <label class="baText">
                    进入办案系统
                    </label>
                    <label class="xs">★</label>
                </p>
                <span class="noBanan">如果是非办案人员进入，打开如下界面</span>
                <!--其他的基本信息资料-->
                <div class="oMenu">
                    <p class="otherMenu jbxx">
                        <svg class="om" aria-hidden="true">
                            <use xlink:href="#icon-ziliao"></use>
                        </svg>
                        <label for="">基本资料</label>
                        <svg class="rj" aria-hidden="true">
                            <use xlink:href="#icon-jiantou"></use>
                        </svg>
                    </p>
                    <p class="otherMenu wdjb">
                        <svg class="om" aria-hidden="true">
                            <use xlink:href="#icon-jubao"></use>
                        </svg>
                        <label for="">我的控告</label>
                        <svg class="rj" aria-hidden="true">
                            <use xlink:href="#icon-jiantou"></use>
                        </svg>
                    </p>
                    <p class="otherMenu wdzx">
                        <svg class="om" aria-hidden="true">
                            <use xlink:href="#icon-zixun_fuzhi"></use>
                        </svg>
                        <label for="">我的咨询</label>
                        <svg class="rj" aria-hidden="true">
                            <use xlink:href="#icon-jiantou"></use>
                        </svg>
                    </p>
                    <p class="otherMenu xtxx">
                        <svg class="om" aria-hidden="true">
                            <use xlink:href="#icon-xiaoxi1"></use>
                        </svg>
                        <label for="">系统消息</label>
                        <svg class="rj" aria-hidden="true">
                            <use xlink:href="#icon-jiantou"></use>
                        </svg>
                    </p>
                    <p class="otherMenu aqxx">
                        <svg class="om" aria-hidden="true">
                            <use xlink:href="#icon-anquan"></use>
                        </svg>
                        <label for="">安全管理</label>
                        <svg class="rj" aria-hidden="true">
                            <use xlink:href="#icon-jiantou"></use>
                        </svg>
                    </p>
                    <p class="otherMenu userxx">
                        <svg class="om" aria-hidden="true">
                            <use xlink:href="#icon-lock"></use>
                        </svg>
                        <label for="">切换用户</label>
                        <svg class="rj" aria-hidden="true">
                            <use xlink:href="#icon-jiantou"></use>
                        </svg>
                    </p>
                </div>              
            </div>
        </div>
        <audio id="audio" src="sounds/dd.wav"></audio>
        <audio id="sxaudio" src="sounds/sx.wav"></audio>
<!--前台模版-->
<script id="tpl-cloumnList" type="text/html">
    {{each curData v k}}
        <div class="swiper-slide {{if k==0}}selected has{{/if}}" data-id="{{v.columnid}}">{{v.columnname}}</div>
    {{/each}}
</script>
<script id="tpl-newsListDiv" type="text/html">
    {{each curData v k}}
    <div class="swiper-slide swiper-no-swiping" data-name="{{v.columnname}}" >
         <ul id="dataList{{k+1}}" class="data-list" data-cid="{{v.columnid}}">
         </ul>
    </div>
    {{/each}}
</script>
<script id="tpl-newsList" type="text/html">
        {{each curData v k}}
        <li  id={{v.newsid}} class='newsOne'>
            <p class="noLeft">
                <span class="nolTitle">{{v.newstitle}}</span>
                <span class="vcs">
                    <label class="lls">浏览数:{{v.count}}</label>
                    <label class="pls">评论:{{v.comnum}}</label>
                </span>
            </p>
            <p class="noRight">
                <img class="pd-img" src="{{v.piclogo}}"/>
            </p>
        </li>
        {{/each}}
</script>
<script id="tpl-sfjzList" type="text/html">
        {{each curData v k}}
        <li class="sfzjOne" id={{v.newsid}}>
            <p class="noLeft">
                <span class="nolTitle">{{v.newstitle}}</span>
                <span class="vcs">
                    <label class="lls">浏览数:{{v.count}}</label>
                    <label class="pls">评论:{{v.comnum}}</label>
                </span>
            </p>
            <p class="noRight">
                <img class="pd-img" src="{{v.piclogo}}"/>
            </p>
        </li>
        {{/each}}
</script>
<!--前台模版end-->
        
        
        
        
        
<script type="text/javascript" src="js/slider.js" ></script>        
<script src="js/plug/mescroll.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/plug/mescroll-option.js" type="text/javascript" charset="utf-8"></script>
<!--<script src="js/h5.js" type="text/javascript" charset="utf-8"></script>-->
<script src="js/jquery.ztree.all.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/page/index.js" type="text/javascript" charset="utf-8"></script>
<script language="JavaScript">
        

        //轮播图
        $('#demo01').flexslider({
        animation: "slide",
        direction:"horizontal",
        easing:"swing"
        });

        //底部栏目切换
        $(document).ready(function(){
            
            //切换底部按钮
            var audio = $("#audio")[0];     
            $(document).on("click touchstart", "a.mui-tab-item", function() {
                $(this).find("svg").addClass("zoomIn");
                audio.play();
                $(this).siblings().find("svg").removeClass("zoomIn");
            });
            
            
            
            
            
            //设置头像大小
            var picHeight = $(".hnMain").height();
            $(".hnMain p.hnPic").width(picHeight);
        })
        
</script>      













</body>
</html>